'use client';

import React from 'react';
import { Card, Typography, Row, Col, Tag } from 'antd';

const { Title, Text } = Typography;

const LoginCredentials: React.FC = () => {
  const credentials = [
    {
      role: '管理员',
      username: 'admin',
      password: 'admin123',
      color: 'red',
      description: '拥有所有权限，可以管理用户和工单',
    },
    {
      role: '经理',
      username: 'manager1',
      password: 'manager123',
      color: 'blue',
      description: '可以查看和管理工单，查看用户信息',
    },
    {
      role: '普通用户',
      username: 'dev1',
      password: 'dev123',
      color: 'green',
      description: '可以创建和管理自己的工单',
    },
    {
      role: '访客',
      username: 'guest1',
      password: 'guest123',
      color: 'gray',
      description: '只能查看工单，无法创建或修改',
    },
  ];

  return (
    <Card 
      title="测试账户信息" 
      style={{ marginTop: 24 }}
    >
      <Text type="secondary" style={{ marginBottom: 16, display: 'block' }}>
        以下是系统预设的测试账户，您可以使用这些账户体验不同角色的功能权限：
      </Text>
      
      <Row gutter={[16, 16]}>
        {credentials.map((cred, index) => (
          <Col xs={24} sm={12} md={6} key={index}>
            <Card 
              size="small" 
              style={{ height: '100%' }}
              title={
                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                  <Tag color={cred.color}>{cred.role}</Tag>
                </div>
              }
            >
              <div style={{ marginBottom: 8 }}>
                <Text strong>用户名：</Text>
                <Text code>{cred.username}</Text>
              </div>
              <div style={{ marginBottom: 8 }}>
                <Text strong>密码：</Text>
                <Text code>{cred.password}</Text>
              </div>
              <Text type="secondary" style={{ fontSize: 12 }}>
                {cred.description}
              </Text>
            </Card>
          </Col>
        ))}
      </Row>
    </Card>
  );
};

export default LoginCredentials; 